import React from "react"
import Scrollbar from "react-scrollbars-custom"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import {
	faDownload,
	faHourglassHalf,
	faPercent,
	faRocket,
	faSortAmountUp,
	faSortAmountDownAlt,
} from "@fortawesome/free-solid-svg-icons"
import { IAdditionalFunding } from "../types"
import { CONSTANTS } from "../constants"
import { getTimeDate, getArrayUniqueValues } from "../common"

export const AdditionalFunding: React.FC<IAdditionalFunding> = props => {
	const {
		userId,
		getDataTickers,
		getFundingRates,
		fundingRates,
		scrollStyle,
	} = props

	const startState = {
		timeVisible: false,
		sortName: "byAsset",
		sortType: "up",
	}

	const [stateProps, handlerState] = React.useState(startState)

	const getArraySorted = (params: any) => {
		const { rates, sortName, sortType } = params
		const arraySorted = rates.sort((a: any, b: any) => {
			if (sortName === "byRate" && sortType === "up") {
				if (a.fundRate > b.fundRate) return -1
				if (a.fundRate < b.fundRate) return 1
			} else if (sortName === "byRate" && sortType === "down") {
				if (a.fundRate < b.fundRate) return -1
				if (a.fundRate > b.fundRate) return 1
			} else if (sortName === "byAsset" && sortType === "up") {
				if (a["baseAsset"] > b.baseAsset) return -1
				if (a.baseAsset < b.baseAsset) return 1
			} else if (sortName === "byAsset" && sortType === "down") {
				if (a.baseAsset < b.baseAsset) return -1
				if (a.baseAsset > b.baseAsset) return 1
			} else if (sortName === "byExchange" && sortType === "up") {
				if (a.exchange > b.exchange) return -1
				if (a.exchange < b.exchange) return 1
			} else if (sortName === "byExchange" && sortType === "down") {
				if (a.exchange < b.exchange) return -1
				if (a.exchange > b.exchange) return 1
			}
			return 0
		})
		return arraySorted
	}

	const ratesSorted = getArraySorted({
		rates: fundingRates,
		sortName: stateProps.sortName,
		sortType: stateProps.sortType,
	})
	const sortIconStyle = { marginLeft: "5px", cursor: "pointer" }

	const listRates =
		fundingRates.length === 0 ? (
			<tr>
				<td colSpan={11}>{CONSTANTS.ERROR_TEXT}</td>
			</tr>
		) : (
			ratesSorted.map((item: any, index: number) => {
				return (
					<tr key={index}>
						<td>{index + 1}</td>
						<td colSpan={2} scope="col">
							{item.typeMarket}
						</td>
						<td>{item.bidPrice}</td>
						<td>{item.askPrice}</td>
						<td>{item.exchange}</td>
						<td>{item.baseAsset}</td>
						<td>{item.quoteAsset}</td>
						<td>{(item.fundRate * 100).toFixed(4)}</td>
						<td>{item.fundHours}</td>
						<td>{getTimeDate(item.fundTime)}</td>
					</tr>
				)
			})
		)

	return (
		<div className="container">
			<div className="row">
				<Scrollbar style={scrollStyle}>
					<table className="table table-hover table-striped table-sm">
						<thead>
							<tr>
								<th>#</th>
								<th colSpan={2} scope="col" className="text-left">
									<button
										className="btn btn-outline-warning btn-sm"
										title="getDataTickers"
										onClick={() => {
											const objParams = { userId, arrExchanges: [] }
											getDataTickers(objParams)
										}}
									>
										<FontAwesomeIcon icon={faRocket} />
									</button>
									<button
										className="btn btn-outline-info btn-sm"
										title="getFundingRates(first)"
										onClick={() => {
											const objParams = {
												typeQuery: "firstQuery",
												arrExchanges: [],
											}
											getFundingRates(objParams)
										}}
									>
										<FontAwesomeIcon icon={faDownload} />
									</button>
									<button
										className="btn btn-outline-success btn-sm"
										title="getFundingRates(second)"
										onClick={() => {
											const objParams = {
												typeQuery: "secondQuery",
												arrExchanges: getArrayUniqueValues({
													nameField: "baseAsset",
													arrayItems: fundingRates,
												}),
											}
											fundingRates.length === 0
												? console.log()
												: getFundingRates(objParams)
										}}
									>
										<FontAwesomeIcon icon={faDownload} />
									</button>
									{/* <button
										className={`btn btn-outline-${
											stateProps.timeVisible ? "info" : "danger"
										} btn-sm`}
										disabled
										title="timeVisible"
										onClick={() => {
											handlerState({
												...stateProps,
												timeVisible: !stateProps.timeVisible,
											})
										}}
									>
										{stateProps.timeVisible ? (
											<FontAwesomeIcon icon={faPercent} />
										) : (
											<FontAwesomeIcon icon={faHourglassHalf} />
										)}
									</button> */}
								</th>
								<th>BuyPrice</th>
								<th>SellPrice</th>
								<th>
									<span
										style={sortIconStyle}
										onClick={() => {
											handlerState({
												...stateProps,
												sortName: "byExchange",
											})
										}}
									>
										Exchange
									</span>
									{stateProps.sortName === "byExchange" ? (
										<span
											className="text-warning"
											title="byExchange"
											style={sortIconStyle}
											onClick={() => {
												handlerState({
													...stateProps,
													sortName: "byExchange",
													sortType: stateProps.sortType === "up" ? "down" : "up",
												})
											}}
										>
											<FontAwesomeIcon
												icon={
													stateProps.sortType === "up"
														? faSortAmountDownAlt
														: faSortAmountUp
												}
											/>
										</span>
									) : null}
								</th>
								<th>
									<span
										style={sortIconStyle}
										onClick={() => {
											handlerState({
												...stateProps,
												sortName: "byAsset",
											})
										}}
									>
										baseAsset
									</span>
									{stateProps.sortName === "byAsset" ? (
										<span
											className="text-warning"
											title="byAsset"
											style={sortIconStyle}
											onClick={() => {
												handlerState({
													...stateProps,
													sortName: "byAsset",
													sortType: stateProps.sortType === "up" ? "down" : "up",
												})
											}}
										>
											<FontAwesomeIcon
												icon={
													stateProps.sortType === "up"
														? faSortAmountDownAlt
														: faSortAmountUp
												}
											/>
										</span>
									) : null}
								</th>
								<th>quoteAsset</th>
								<th>
									<span
										style={sortIconStyle}
										onClick={() => {
											handlerState({
												...stateProps,
												sortName: "byRate",
											})
										}}
									>
										fundRate
									</span>
									{stateProps.sortName === "byRate" ? (
										<span
											className="text-warning"
											title="byRate"
											style={sortIconStyle}
											onClick={() => {
												handlerState({
													...stateProps,
													sortName: "byRate",
													sortType: stateProps.sortType === "up" ? "down" : "up",
												})
											}}
										>
											<FontAwesomeIcon
												icon={
													stateProps.sortType === "up"
														? faSortAmountDownAlt
														: faSortAmountUp
												}
											/>
										</span>
									) : null}
								</th>
								<th>fundHours</th>
								<th>fundTime</th>
							</tr>
						</thead>
						<tbody>{listRates}</tbody>
					</table>
				</Scrollbar>
			</div>
		</div>
	)
}
